<template>
    <div class="checkbox">
        <div class="checkbox_header">
            <span  class="checkboxFive">
              <input type="checkbox" name="" id="1">
              <label for="1"></label>
            </span>
        </div>
        <slot></slot>
        <son :c="a" @listHah = "list_hah"></son>
        <p class="dob">span部分一个checkbox按钮，如果要换成radio,把css改动一下,只需要checkboxFive以内的样式</p>
    </div>
</template>
<style scoped>
  .dob{font-size: 20px;color: #4096ee;padding:0 20px;}
  .checkbox_header{height: 50px;padding-top: 50px}
  .checkboxFive {position: relative;}
  .checkboxFive input{position: absolute;top: 5px;left: 25px}
  .checkboxFive label {
    cursor: pointer;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 3px;
    left: 23px;
    border-radius: 4px;
    background: #fff;
    border:1px solid #ddd;
  }
  .checkboxFive label:after {
    opacity: 0.1;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 3px;
    left:3px;
    /*border: 1px solid #333;*/
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
  }
  .checkboxFive input[type=checkbox]:checked + label:after {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    opacity: 1;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 5px;
    left:4px;
    border: 1px solid #fff;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
  }
  .checkboxFive input[type=checkbox]:checked + label {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    background: #4096ee;
    border: none;
    width: 18px;
    height: 18px;
  }
</style>
<script>
import son from "@/view/checkbox/son"
  export default {
    name: 'mao-checkbox',
    data () {
      return {
          a:132
      }
    },
    components:{
      son
    },
    methods:{
      list_hah(val){
        console.log(val)
      }
    }
  }
</script>
